La pagina html di partenza

Il punto di partenza per il nostro scopo è un semplicissimo elenco definito dai tag <ul> e </ul>, all' interno dei quali avremo tanti elementi <li> quante sono le scritte in verticale di cui avremo bisogno. Gli elementi <li> verranno poi trasformati con codice apposito, per poter finalmente leggere in verticale; ma andiamo con ordine.

L' elemento <em>

L' elemento <em>, conosciuto come elemento inline, lo trasformeremo in elemento block-element. È vero che serve per "enfatizzare" una parte di testo ma, per il nostro esempio, non assolverà a questo compito. Ad esso saranno associate delle "classi" in modo tale che venga completamente trasformato. Detto questo, cominciamo a vedere un primo esempio di scrittura verticale. Premetto che ho utilizzato, come sempre, un #container all' interno del quale metteremo i nostri elementi. Se non mi soffermo nella descrizione di tale box è perchè non prevede nessun codice particolare. Cominciamo con il codice CSS che ci interessa di più.

La classe ul.verticale

Tutto "ruota" attorno alla definizione della classe ".verticale" il cui codice è:

ul.verticale {
margin:0;
padding:0;
list-style-type:none;
font-size:1.4em;
background: #e5e5e5;
border:1px solid #666;
width:600px;
}

Come si può vedere, non ho fatto altro che associare all' elemento ul la propria classe. Ho eliminato i punti elenco [list-style-type:none;], definito la grandezza che il carattere deve assumere [font-size:1.4em;], eliminato tutti i margini e padding [margin:0; padding:0;], stabilita la lunghezza del box [width:600px;] ed assegnato un bordo di colore grigio scuro [border:1px solid #666;]. Adesso vediamo l' elemento li:

.verticale li {
margin: 0.3em;
float:left;
display:block;
}

Per poter dare un pò di distacco tra una parola e l' altra, ho assegnato un margine pari a 0.3em [margin: 0.3em;], flottato l' elemento li a sinistra [float:left;] e fatto in modo che diventi elemento di blocco [display:block;]. Ora è il momento di dichiarare l' elemento li associato all' elemento <em>. Questa classe ci darà la possibilità di avere una lettere sotto l' altra.

.verticale li em {
display:block;
text-align:center;
background: #e5e5e5;
width:2.2em;
font-style:normal;
}

Anche in questo caso, essendo l' elemento em un elemento inline, dobbiamo dichiarare che lo vogliamo come elemento di blocco [display:block;], con ua larghezza pari a 2.2em, allineato al centro e con uno stile di font non classico, cioè proprio di em, bensì uno stile normale [font-style:normal;]. Vedremo lo stile "enfatizzato" solo quando alla pagina non sarà associato nessun foglio di stile.

Il codice Xhtml

Se in un normale elenco scriviamo semplicemente una frase, come voce elenco, all' interno dell' elemento <li>, in questo caso dobbiamo prestare attenzione perchè ad ogni lettera deve essere associata la classe .verticale li em più su dichiarata. Supponiamo di voler scrivere la parola CIAO, nella pagina html avremo:

<ul class="verticale">
<li>
<em>C</em><em>I</em><em>A</em><em>O</em></li>
</ul>

Una variante con i bordi

Continuando a vedere, sempre per rimanere nell' ambito di questo tutorial, fino dove ci si può spingere con l' uso dei CSS, ho provato a realizzare una variante con i bordi ai 4 lati. L' effetto non è male, almeno credo. Acquisito il concetto di come realizzare la scritta in verticale, nel modo mostrato prima, non dovrebbe essere difficile realizzare i bordi attorno alle scritte. Vediamo come fare... Il codice CSS per ul.verticale e .verticale li rimane invariato. Quello che dovremo cambiare, o meglio aggiungere, sarà l' elemento .verticale li em. Non dobbiamo fare altro che aggiungere il codice per avere il bordo sinistro e destro, in questo modo:

.verticale li em {
background:#fff;
border-left:0.1em solid #000;
border-right:0.1em solid #000;
}

L' unica proprietà che ho cambiato, rispetto al primo esempio, è il colore di sfondo; in questo secondo caso ho dichiarato il colore bianco [background:#fff;]. Il resto rimane invariato ma si devono aggiungere i 2 bordi laterali: border-left:0.1em solid #000; e border-right:0.1em solid #000;.

Il bordo superiore ed inferiore

Per quanto riguarda i bordi superiore ed inferiore, dobbiamo creare altre due classi; una l' ho nominata .verticale li em.top e l' altra .verticale li em.end, rispettivamente per il superiore [.top] e per l' inferiore [.end]. Il codice è:

.verticale li em.top {
border-top:0.1em solid #000;
}
.verticale li em.end{
border-bottom:0.1em solid #000;
}

A questo punto, dobbiamo procedere nella stessa maniera, come per il primo esempio, nella scrittura, lettera per lettera, associando le classi appropriate. Facendo sempre riferimento alla parola CIAO, nella pagina html, come codice, avremo:

<ul class="verticale">
<li>
<em class="top">C</em><em>I</em><em>A</em><em class="end">O</em></li>
</ul>

In questo modo otterremo una scritta, verticale, ed i 4 bordi come li abbiamo dichiarati. Ovvio che si potranno avere caratteristiche diverse da bordo a bordo, oppure di colore non omogeneo tra di loro.... basta giocarci un pò e vedere il risultato.

Seconda variante: bordi + link

E se volessimo associare alla scritta verticale un link? Possiamo farlo tranquillamente; basta soltanto cimentarsi a scrivere il codice esatto ed il gioco è fatto! Ho realizzato un esempio in cui, quando passeremo sulla scritta verticale, cambierà il colore del testo, il colore di sfondo ed il colore dei bordi, oltre a poter collegare effettivamente il testo ad una pagina esterna o interna del sito. Siccome per questo terzo esempio il codice è maggiore, ripeterò, quando necessrio, parti di codice CSS. Anche in questo caso gli elementi ul.verticale e .verticale li rimangono gli stessi, a livello di codice. Introdurrò, adesso, il codice con cui applicare i collegamenti.

.verticale li a, .verticale li a:visited {
text-decoration:none;
color:#000;
display:block;
width:2.2em;
border-top: 0.1em solid #000;
height:auto;
}

Le pseudo-classi a e a:visited hanno le seguenti caratteristiche: si elimina la sottolineatura di dafault associata al link; viene reso come elemento di blocco [display:block;]; l' altezza non viene dichiarata ma dipende da "quanto" testo viene scritto ed il bordo superiore viene dichiarato in questo stato [border-top: 0.1em solid #000;].
La stessa pseudoclasse a deve essere assegnata anche all' elemento <em>:

.verticale li a em{
font-style:normal;
display:block;
text-align:center;
background:#fff;
border-left:0.1em solid #000;
border-right:0.1em solid #000;
}

Siccome ho scritto all' inizio che l' elemento <em> "enfatizza" il testo al quale viene associato, si vuole avere, invece, testo non stampato a video in corsivo, ragione per cui ho scritto che il font deve essere normale [font-style:normal;], allineato al centro [text-align:center;] e vengono dichiarati il colore e la dimensione dei bordi [border-left:0.1em solid #000; border-right:0.1em solid #000;]. Da notare che in questo stato si assegnano i bordi destro e sinistro. Tra poco vedremo anche come fare per assegnare il bordo inferiore. Il passaggio successivo, prevede lo stato :hover; anch' esso devve essere assegnato sia al tag <li> che all' elemento <em>:

.verticale li a:hover{
background:#333;
border-top: 0.1em solid #f60;
}
.verticale li a:hover em {
background:#333;
color: #f60;
border-left:0.1em solid #f60;
border-right:0.1em solid #f60;
}

Nel primo codice [.verticale li a:hover], non facciamo altro che assegnare il colore di sfondo quando il mouse si troverà sul link [background:#333;] ed il colore del bordo superiore [border-top: 0.1em solid #f60;]. Infatti cosa succederà bello stato :hover? Colore del testo e colore dei bordi saranno uguali [#f60], mentre il colore di background sarà un colore quasi nero [#333]. Stessa cosa si deve fare per il secondo codice [.verticale li a:hover em], oltre ad assegnare il colore dei due bordi [destro + sinistro]. Non ci rimane che il bordo inferiore, sia nello stato a che in quello :hover:

.verticale li a em.end{
border-bottom:0.1em solid #000;
}
.verticale li a:hover em.end{
border-bottom:0.1em solid #f60;
}

Contrassegnando anche in questo caso la classe che stabilisce il bordo inferiore con il nome .end, abbiamo che nello stato di link non ancora visitato esso ha il colore nero e nello stato :hover, assumerà il colore #f60, come gli altri 3. Detto ciò, credo che la pagina di esempio finale possa chiarire ogni dubbio in merito.

Alla fine, senza nessuna presunzione, posso affermare che... non mi dispiace affatto questa applicazione; sempre meglio che usare, come accenato all' inizio, immagini .gif magari usate impropriamente quando alla pagina non viene associato nessun foglio di stile. Penso anche a coloro i quali si avvalgono di screen-readers per navigare in rete. Spero che questa piccola applicazione possa aiutarli un pò di più.

Fonte: http://www.webmasterpoint.org/webdesign/css/59-scrivere-verticale-css_2.asp